<template>
	<view class="uni-container">
		<view class="headerBody">
			<view class="title">购物车</view>
			<uni-search-bar @confirm="search" @input="input" @cancel="cancel" class="search"/>
		</view>
		<scroll-view class="mainBody" scroll-y="true">
			<view class="cardBody" v-for="(item,index) in  list" :key="index">
				<image class="imagePng" :src="item.url" />
				<view class="textBody">
					<uni-icons type="trash-filled" size="14" class="iconBody" @click="delFun(item,index)" />
					<view class="title">{{item.title}}
					</view>
					<view class="text">{{item.text}}</view>
					<view class="buttonCard">
						￥{{item.number}}
						<view class="floatR">
							<image src="http://localhost:8080/static/deleteButton.png" @click="deleteFun(item)" />
							<view>{{item.value}}</view>
							<image src="http://localhost:8080/static/addButton.png" @click="addFun(item)"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footerBody">
			总价：<text calss="red">￥ {{value}}</text>
			<view class="addButton" @click="sumbitFun">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '红烧牛肉',
						text: "150g牛肉",
						number: 50,
						value: 1,
						url: 'http://localhost:8080/static/lbt3.png'
					},
					{
						url: 'http://localhost:8080/static/lbt3.png',
						title: '草莓核桃奶盖',
						text: '冷饮',
						number: 15,
						value: 2
					}
				],
				value: 0
			}
		},
		mounted() {
			this.list.forEach((item, index) => {
				let valueNum = item.value * item.number
				this.value += valueNum
			})
			console.log(this.value)
		},
		methods: {
			// 删除
			delFun(item, index) {
				this.list.splice(index, 1)
				this.value = 0
				this.list.forEach((item, index) => {
					let valueNum = item.value * item.number
					this.value += valueNum
				})
			},
			// 减少
			deleteFun(item) {

				if (item.value == 0) {
					return
				} else {
					this.value = 0
					item.value -= 1
				}
				this.list.forEach((item, index) => {
					let valueNum = item.value * item.number
					this.value += valueNum
				})
			},
			// 增加
			addFun(item) {
				this.value = 0
				item.value += 1
				this.list.forEach((item, index) => {
					let valueNum = item.value * item.number
					this.value += valueNum
				})
			},
			// 提交
			sumbitFun() {
				// console.log(1111111,uni.navigateTo({url: 'pages/dingdanxq/index'}))
				uni.navigateTo({
					url: '/pages/dingdanqr/index',
					fail:(res)=>{
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headerBody {
		height: 200rpx;
		background: #fff;

		.title {
			font-size: 16px;
			font-weight: 500;
			text-align: center;
			line-height: 80rpx;
			// font-family: "Source Han Sans";
		}

	}
	.iconBody {
		float: right;
		color: #cccccc;
	}


	.mainBody {
		height: calc(100vh - 390rpx);
		width: calc(100% - 60rpx);
		padding: 20rpx 30rpx;

		.cardBody {
			height: 188rpx;
			background: #fff;
			margin-bottom: 40rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 30rpx 10rpx 0;

			.imagePng {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.textBody {
				padding: 10rpx;
				width: calc(100% - 160rpx)
			}

			.title {
				text-align: left;
				font-size: 14px;
				font-weight: 500;
			}

			.text {
				text-align: left;
				font-size: 10px;
				font-weight: 350;
				height: 60rpx;
				padding: 0;

			}

			.buttonCard {
				color: #EC3636;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.floatR {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 200rpx;
					height: 40rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						cursor: pointer;
						margin-top: 8rpx;
					}

					view {
						line-height: 40rpx;
						margin-top: 8rpx;
						// flex:2
					}
				}
			}
		}
	}

	.footerBody {
		height: 100rpx;
		width: calc(100% - 30rpx);
		display: flex;
		flex-direction: row;
		background: #fff;
		line-height: 100rpx;
		padding: 0 0 0 30rpx;
		justify-content: space-between;
		position: absolute;
		bottom: 0rpx;
		text {
			color: #EC3636;
			font-size: 18px;
			font-weight: 500;
		}

		.addButton {
			background: #FF922C;
			width: 250rpx;
			border-radius: 30rpx 0 0 0;
			color: #fff;
			line-height: 100rpx;
			font-size: 18px;
			font-weight: 500;
			text-align: center;
		}
	}
</style>
